import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { connect } from 'react-redux';

import memo from '../common/wrapMemo';
import { Button, Form, Input, Checkbox, message } from 'antd';
import style from './Login.module.scss';
import api from '../../api';
import modules from '../../store/modules';

const { actionCreators } = modules;

const Login = memo((props) => {
    const { dispatch } = props;
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const [remember, setRemember] = useState(false);

    useEffect(() => {
        // 获取用户信息
        api.user.getUserInfo().then((res) => {
            res={
                data:{
                    code:200,
                },
                msg:"成功"
            }
            const {code} = res.data;
            if(code === 200){
                const userInfo = JSON.parse(localStorage.getItem('user'));
                dispatch(actionCreators.userInfo.update(userInfo));
                navigate('/');
            }
        })
    },[]);

    const onFinish = (values) => {
        api.user.login(values).then((res) => {
            res={
                data:{
                   code:200,
                   msg:"成功", 
                   data:{
                    userName:"admin",
                    roleId:"1"
                   }
                }            
            }
            const {code, data, msg} = res.data;
            
            if (code === 200) {
                // if (remember) {
                    localStorage.setItem('user', JSON.stringify(data));
                // }
                dispatch(actionCreators.userInfo.update(data));
                navigate('/');
            } else {
                message.error(msg);
                setRemember(false);
            }
        });
    };

    // const onRegister = () => {
    //     navigate('/register');
    // };

    return (
        <div className={style.login}>
            <div className={style.loginBox}>
                <div className={style.title}>象山县农业产业电子地图平台</div>
                <Form form={form} layout="vertical" onFinish={onFinish} requiredMark={false}>
                    <Form.Item
                        name="userName"
                        label="用户名"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名！',
                                whitespace: false,
                            },
                        ]}
                    >
                        <Input className={style.input} placeholder="请输入" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                                whitespace: false,
                            },
                        ]}
                    >
                        <Input.Password
                            className={style.input}
                            placeholder="请输入"
                            autoComplete="new-password"
                        />
                    </Form.Item>
                    <div className={style.option}>
                        <Checkbox
                            checked={remember}
                            className={style.check}
                            onChange={(e) => {
                                setRemember(e.target.checked);
                            }}
                        >
                            记住密码
                        </Checkbox>
                        {/* <span className={style.register} onClick={onRegister}>
                            注册用户
                        </span> */}
                    </div>
                    <Form.Item className={style.btnWrap}>
                        <Button type="text" htmlType="submit" className={style.btn}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
});

function mapStateToProps() {
    return {};
}

export default connect(mapStateToProps)(Login);
